<template>
  <div>
    <el-table
      :data="titleList"
      style="width: 100%; margin-bottom:80px"
      @row-click="editTitle"
    >
      <el-table-column prop="fullTitle" label="全称"> </el-table-column>
      <el-table-column prop="shortTitle" label="简称"> </el-table-column>
      <el-table-column label="删除" width="50px">
        <template v-slot="{ row }">
          <i class="el-icon-remove-outline" @click.stop="delClick(row.id)"></i>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import {
  invoiceTitlelist,
  removeInvoiceTitle
} from "@/BMViews/api/aboutInvoice/aboutInvoice.js";
export default {
  name: "Titleinvoice",
  data() {
    return {
      titleList: [] //发票抬头列表
    };
  },

  created() {
    if (this.$store.state.user.userInfo.whereCircleId) {
      this.getTitleList();
    }
    // 新增和编辑后把刷新的父级数据传过来
    this.$bus.$on("titleList", data => {
      // data就是参数
      console.log("传父级数据", data);
      this.titleList = data;
    });
  },
  beforeDestroy() {
    this.$bus.$off("titleList");
  },
  watch: {
    "$store.state.user.userInfo.whereCircleId": {
      handler() {
        this.getTitleList();
      }
    }
  },
  methods: {
    // 查询发票抬头的接口
    async getTitleList() {
      let circle_id = {
        circle_id: this.$store.state.user.userInfo.whereCircleId
      };
      //   console.log("circle_id:", circle_id);
      const { rows, code } = await invoiceTitlelist(circle_id);
      if (code == 200) {
        this.titleList = rows;
      }
    },
    // 编辑
    editTitle(row) {
      //   兄弟传值
      this.$bus.$emit("titleEvent", row, false, "edit");
    },
    // 删除
    async delClick(id) {
      this.$confirm("是否删除该发票抬头？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        roundButton: true
      })
        .then(async () => {
          // 调接口
          const { code } = await removeInvoiceTitle(id);
          if (code == 200) {
            this.$message.success("删除成功");
            //   刷新父级列表
            this.getTitleList();
          }
        })
        .catch(() => {});
    }
  }
};
</script>

<style lang="scss" scoped>
/* 表格样式 */
::v-deep .el-table {
  font-size: 13px;
}
::v-deep .el-table .el-table__header-wrapper th {
  background-color: #fff;
}
::v-deep .el-table th > .cell {
  font-size: 13px;
  color: #909aaa;
}
</style>
